<template>
    <div class="message-item">
      <img :src="avatar" alt="" v-lazy />
      <div class="message-info">
        <span class="name">{{ name }}</span>
        <span class="content">{{ lastWord }}</span>
      </div>
      <div class="message-time">
        <span class="newMessage" v-if="newMessageLength">
          {{newMessageLength}}
        </span>
        <span>
          {{ lastTime }}
        </span>
      </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import type { Ref } from "vue";
import { getUserInfoFromDB } from "@/Dexie/UserDB";
import { getLastMessageBySessionID } from "@/Dexie/MessageDB";
import { timeFormatHM } from "@/utils/utils";
import { emitterOff, emitterOn } from "@/mitt/mitt";
import { getGroupInfoFromDB } from "@/Dexie/GroupDB";
import { newMessageLengthFunc } from "@/components/ChatBox/Hooks";

const props = defineProps<{
  data: joinListItemType,
  backgroundColor: String,
  type: number
}>();
const { data, backgroundColor, type } = toRefs(props);
const name: Ref<string | undefined> = ref("");
const avatar: Ref<string | undefined> = ref("");
const sessionID: Ref<string | undefined> = ref("");
const lastWord: Ref<string | undefined> = ref("");
const lastTime: Ref<string | undefined> = ref("");

// 这个数据sessionId是不是有新数据的对象
const [getNewMessageLengthObj] = newMessageLengthFunc();
const newMessageLengthObj = getNewMessageLengthObj();
// computed 出数量
const newMessageLength = computed(() => {
  if (sessionID.value) {
    return newMessageLengthObj.value[sessionID.value];
  }
  return undefined;
})

// 获取用户的信息数据展示
onMounted(async () => {
  // 初始化数据
  await updateCard();
  // 监听并进行数据更新
  emitterOn(`friendCard-${sessionID.value}`, updateCard);
});
// 关闭监听
onBeforeUnmount(() => {
  emitterOff(`friendCard-${sessionID.value}`);
});

const updateCard = async () => {
  const getFriendInfo = [getUserInfoFromDB, getGroupInfoFromDB];
  let friendAccount = data.value._friend_account;
  let friendInfo = await getFriendInfo[type.value](friendAccount);
  if (friendInfo) {
    name.value = friendInfo._name;
    avatar.value = friendInfo._avatar ?? "";
    sessionID.value = data.value._session_id;
    updateLastMessage(sessionID.value);
  }
};
const updateLastMessage = async (sessionId: string) => {
  let message = await getLastMessageBySessionID(sessionId);
  if (!message) {
    return;
  }
  let friendInfo = await getUserInfoFromDB(message.sender);
  lastWord.value = `${friendInfo?._name}:${message.message}`;
  lastTime.value = timeFormatHM(message.timestamp);
};
</script>

<style scoped lang="less">
.message-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 280px;
  height: 60px;
  padding: 12px 10px;
  color: var(--el-color-info-light-7);
  cursor: pointer;
  background-color: v-bind(backgroundColor);
  border-radius: 8px;

  img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
  }

  .message-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 10px;

    .name {
      font-size: 14px;
    }

    .content {
      width: 160px;
      font-size: 12px;
      color: var(--font-light);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .message-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    font-size: 12px;
    color: var(--font-light);
    .newMessage {
      display: flex;
      justify-content: center;
      color: white;
      width: 25px;
      height: 15px;
      line-height: 15px;
      background-color: red;
      border-radius: 10px;
      margin-bottom: 5px;
    }
  }
}
</style>
